
p>i
  display flex
  position absolute

  &:before
    display flex
    flex 1
    content ''
    border 0 solid rgba(0, 0, 0, 0.4)
    border-width 100vh 100vw
    margin -100vh -100vw
    position absolute
    width 100%
    height 100%
    box-sizing content-box
    pointer-events none
    z-index 0

  $space = 24px
  $circle_radius = 12px
  $space_circle_radius = $space + $circle_radius
  $border_width = 2px

  &>b
    background-size 2 * $circle_radius
    display flex
    flex 1
    margin -($space_circle_radius)
    padding $circle_radius
    position relative

    &:after, &:before
      content ''
      flex 1

    &:after
      position absolute
      box-sizing content-box
      border $border_width solid #fff
      box-shadow 0 0 $space #333
      margin: $circle_radius - $border_width
      left $space
      right $space
      bottom $space
      top $space

    &:before
      background url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ff9e40' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e") 0 0 / contain no-repeat

nav
  bottom 40px
  position absolute
  display flex
  z-index 1
  width 100%
  justify-content center

nav, h2
  &>button
    &:first-child
      width 180px
      margin-right 8px

    &:last-child
      font-size 20px
      font-weight 100
      width 52px
      background-color #F9FAFB
      color #474D59
      border-color #ddd
